<script setup lang="ts">
import { reactive, ref } from "vue";

const msg: string = 'Hello World!'
const count = 20
const price = 30
const isMarry: boolean = false
const age = 20
const money = 0
const skills = '写代码'
//声明函数
const getContent = () => {
    return '张广垒是大帅比！'
}
//定义一个点击函数
const clickFn = (a: number, b: number, c: number) => {
    alert('点我干嘛！' + a)
}
//输入框
const changeValue = (event: InputEvent) => {
    const inputDom = event.target as HTMLInputElement
    console.log('值改变了', inputDom.value)
}
//键盘事件对象 取自MDN-官方的W3c的标准文档
const enterClick = (event: KeyboardEvent) => {
    if (event.key === "Enter") {
        alert('你按了回车~')
    }
}

//reactive 函数，用于处理响应式数据，类似鸿蒙的 @State 装饰器
const person = reactive<{
    name: string,
    age: number,
    sex: "女" | "男"
}>({ name: '张三', age: 18, sex: "女" })
//改变性别
const changeSex = () => {
    person.sex = '女'
}

//ref声明 简单或复杂数据类型
const isMarried = ref(false)

//离婚
const separate = () => {
    isMarried.value = false
}

const people = ref<{ name: string, age: number, height: number, weight: number, money: number, children: number }>({
    name: '张总',
    age: 24,
    height: 175,
    weight: 69,
    money: 9999999,
    children: 2
})
const growup = () => {
    people.value.age += 1
    people.value.height -= 1
    people.value.weight += 1
    people.value.money += 20
    people.value.children += 1

}

const weather = ref("晴转多云")
const mood = ref(`<strong style="color:blue">嬛嬛，朕emo了~</strong>`)
//变脸
const changeFace = () => {
    mood.value = `<h2><strong style="color:red">嬛嬛，朕怒了！！！</strong></h2>`
}



</script>

<template>
    <div class="container">
        <!-- 插值表达式 -->
        <!-- {{ (msg + "  Vue3").split("").reverse().join("") }} -->
        {{ msg + " Vue3" }}
        <p>总价：{{ count * price }}</p>
        <p>年龄：{{ `${age}岁` }}</p>
        <p>婚姻状态：{{ isMarry ? '已婚' : '未婚' }}</p>
        <p>存款：{{ money || '穷光蛋' }}</p>
        <p>技能：{{ skills }}</p>
        <p>函数调用：{{ getContent() }}</p>
        <p>1+2={{ 1 + 2 }}</p>

        <!-- 完整写法v-on:事件名="方法名" -->
        <button v-on:click="clickFn(5, 2, 0)">测试</button>
        <!-- 语法糖写法：@click -->
        <button @click="clickFn(1, 2, 3)">测试</button>
        <input type="text" @change="changeValue" @keydown="enterClick">

        <h1>响应式数据reactive函数</h1>
        <p>姓名：{{ person.name }}</p>
        <p>年龄：{{ person.age }}</p>
        <p>性别：{{ person.sex }}</p>
        <button @click="person.sex = '男'">变性为男</button>
        <button @click="changeSex">变性为女</button>

        <h1>响应式ref函数-简单数据类型</h1>
        <p>婚姻状况：{{ isMarried ? '已婚' : '单身狗' }}</p>
        <button @click="isMarried = true">结婚</button>
        <button @click="separate">离婚</button>

        <h1>响应式ref函数-复杂数据类型</h1>
        <p>姓名：{{ people.name }}</p>
        <p>年龄：{{ people.age }}岁</p>
        <p>身高：{{ people.height }}cm</p>
        <p>体重：{{ people.weight }}kg</p>
        <p>财产：{{ people.money }}￥</p>
        <p>孩子：{{ people.children }}个</p>
        <button @click="growup">成长</button>

        <!-- 内容渲染指令 -->
        <h1>v-text和v-html指令</h1>
        <!--v-text指令：可以往里面写文字 -->
        <div v-text="weather"></div>
        <!-- v-html指令：可以往里面写标签 -->
        <div v-html="mood"></div>
        <button @click="weather = '狂风暴雨'">变天</button>
        <button @click="changeFace">变脸</button>



    </div>
</template>

<style scoped>
.container {
    font-size: 30px;
    font-weight: bolder;
    color: brown;
}
</style>